<template>
	<view style="width: 100%;height: 100%;">
		<view class="title_div" v-on:click="delBottomSHow">
			<text>当前课程</text> <text>{{selCourse}}</text>
			<image src="../../static/sobot_right_arrow_icon.png"></image>
		</view>
		<list class="list_div">
			<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			<cell class="item_div" v-for="(item,index) in chapterList" :key="item.id" @tap="toMake(item.id)">
				<view class="left_div">
					<view>{{item.name}}<text>(共{{item.sum}}道题,已刷{{item.answerNum}})</text></view>
					<view>正确率：{{item.accuracy}}%</view>
				</view>
				<view class="right_div">
					<button >做题</button>
				</view>
			</cell>
		</list>

	 	<view class="bottom_div" v-show="bottomSHow">
			<list>
				<cell v-for="(item,index) in courseList" :key="index" @tap="itemClicks(index)">
					{{item.name}}
				</cell>

			</list>

		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomSHow: false,
				courseList: [], //课程数据
				selCourse: '', //当前课程名称，
				courseId:'',//当前课程Id
				chapterList: []
			}
		},onReady:function(){
			this.getUserInfo();//获取当前课程
			
				uni.request({
					url: this.baseUrl+'getCourseByStuId', //仅为示例，并非真实接口地址。
					method:'POST',
					data: {
						stuId: uni.getStorageSync('uid')
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.courseList = res.data.courseEntity;
						this.text = 'request success';
					}
				});
				uni.request({
					url: this.baseUrl+'getChapterList', //仅为示例，并非真实接口地址。
					data: {
						'courseId':uni.getStorageSync('cid'),
						'stuId':uni.getStorageSync('uid'),
						'type':2
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.chapterList = res.data.chapterEntityList;
						// this.text = 'request success';
					}
				});
				
			},
		methods: {
			delBottomSHow: function(e) {
				console.log("hahahhah");
				if (this.bottomSHow == false) {
					this.bottomSHow = true;
				} else {
					this.bottomSHow = false;
				}
			},
			itemClicks: function(e) {

				//列表点击事件
			this.selCourse = this.courseList[e].name;
			this.courseId=this.courseList[e].id
				//根据课程id查询所有的章节信息
			uni.request({
				url: this.baseUrl+'getChapterList', //仅为示例，并非真实接口地址。
				data: {
					'courseId':this.courseId,
					'stuId':uni.getStorageSync('uid'),
					'type':2
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
				},
				success: (res) => {
					console.log(res);
					this.chapterList = res.data.chapterEntityList;
					// this.text = 'request success';
				}
			});
				
				
				
				this.bottomSHow = false;
			},
			toMake: function(e) {
				//去做题页面
				console.log(e);
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '../chapterquestion/chapterquestion?id=' + e
				});
			},
			getDataList() {
				
			},
			getUserInfo:function(){
				//获取当前课程
				var uid=uni.getStorageSync('uid');
				var that=this;
				uni.request({
					url:this.baseUrl + 'student/getStudent',
					method: 'GET',
					data:{
						'stuId':uid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {						
						that.selCourse=res.data.data.courseName;
						that.courseId=res.data.data.courseId;
						this.initData();//初始化页面
					}
				})
			},
			initData:function(){
				//根据课程id查询所有的章节信息
				uni.request({
					url: this.baseUrl+'getChapterList', //仅为示例，并非真实接口地址。
					data: {
						'courseId':this.courseId,
						'stuId':uni.getStorageSync('uid'),
						'type':2
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.chapterList = res.data.chapterEntityList;
						// this.text = 'request success';
					}
				});
			}
		}
	}
</script>

<style>
	.title_div {
		height: 88rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		line-height: 88rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

	}

	.title_div text:nth-child(1) {
		color: #999999;
		margin-right: 20rpx;
	}

	.title_div text:nth-child(2) {
		flex: 1;
	}

	.title_div image {
		height: 26rpx;
		width: 16rpx;
	}

	list {
		background: #FFFFFF;

	}

	.list_div .item_div {
		display: flex;
		width: 100%;
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-bottom: 1px solid #E8E8E8;

	}

	.item_div .left_div view:nth-child(1) {
		color: #333333;
		font-size: 28rpx;
	}

	.item_div .left_div view text {
		color: #999999;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.item_div .left_div view:nth-child(2) {
		color: #666666;
		font-size: 26rpx;
		margin-top: 16rpx;
	}

	.item_div .right_div {
		padding-right: 20rpx;

	}

	.item_div .right_div button {
		height: 50rpx;
		width: 120rpx;
		background: #fcebe9;
		border-radius: 25rpx;
		font-size: 22rpx;
		color: #e1402e;
		line-height: 50rpx;
		margin-right: 20rpx;
	}

	.bottom_div {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	}

	.bottom_div list {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.bottom_div list cell {
		text-align: center;
		height: 88rpx;
		border-bottom: 1px solid #DADADA;
		line-height: 88rpx;

	}
</style>
